<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教育网站</title>

    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入自己的CSS -->
    <link rel="stylesheet" href="css/index.css">
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 logo">
                    <img src="imgs/8_15622904236022.png" alt="">
                </div>
                <div class="col-lg-5 col-md-5 hidden-sm hidden-xs col-lg-offset-3 col-md-offset-3">
                    <ul class="row">
                        <li class="col-lg-2 col-md-2">首页</li>
                        <li class="col-lg-2 col-md-2">关于</li>
                        <li class="col-lg-2 col-md-2">课程</li>
                        <li class="col-lg-2 col-md-2">师资</li>
                        <li class="col-lg-2 col-md-2">咨询</li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-2 col-lg-offset-1 hidden-sm hidden-xs tel">
                    <div class="row">
                        <img src="imgs/14974_15765526568003.png" alt="" class="col-lg-2 col-md-2">
                        <h4 class="col-lg-10 col-md-10">400-028-0000</h4>
                    </div>
                </div>
                <div class="btn btn-default hidden-lg hidden-md  col-sm-1 pull-right menu">三</div>
            </div>
        </div>

    </header>
    <div class="nav">
        <span class="close">X</span>
        <ul>
            <li>首页</li>
            <li>关于</li>
            <li>课程</li>
            <li>师资</li>
            <li>咨询</li>
        </ul>
    </div>
    <div class="focus">
        <div class="container">
            <ul>
                <li>
                    <h1>JAVA+ 大数据</h1>
                </li>
            </ul>
        </div>
    </div>

    <div class="study">
        <div class="container">
            <div class="row">
                <div class="col-lg-3  col-md-3  col-sm-6 col-xs-6">学习进展评估</div>
                <div class="col-lg-3  col-md-3  col-sm-6 col-xs-6">专家顾问团队</div>
                <div class="col-lg-3  col-md-3  col-sm-6 col-xs-6">学习情况一览</div>
                <div class="col-lg-3  col-md-3  col-sm-6 col-xs-6">免费职业规划</div>
            </div>
        </div>
    </div>
    <div class="class">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 android"></div>
                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wlw"></div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 qrs"></div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-12 cpjl"></div>
                        <div class="col-lg-4 col-md-4 col-sm-12 ui"></div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-12 web"></div>
                        <div class="col-lg-8 col-md-8 col-sm-12 ios"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news">
        <div class="container">
            <div class="row">
                <h2 class="pull-left">新闻资讯</h2>
                <div class="pull-right btn btn-warning">MORE</div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 news_focus">
                    <div class="bgc_img">
                        <img src="imgs/1531885843301.jpg" alt="">
                    </div>
                    <h4>网站总体的设计关系到网站的定位</h4>
                    <p>每个人眼中认为的成功网站的定义都不一样，但可以肯定的是，能够吸引目标客户群体为网站带来价值的网站都是成功的。如今在互联网飞速发展的时代，各种技术日新月异，互联网作为一个高新技术产业，成功的网站绝非是买台服务器、做几个网页那么简单</p>
                    <p>2020-11-18 14:56:45</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 news_focus">
                    <div class="bgc_img">
                        <img src="imgs/1531885843302.jpg" alt="">
                    </div>
                    <h4>网站总体的设计关系到网站的定位</h4>
                    <p>每个人眼中认为的成功网站的定义都不一样，但可以肯定的是，能够吸引目标客户群体为网站带来价值的网站都是成功的。如今在互联网飞速发展的时代，各种技术日新月异，互联网作为一个高新技术产业，成功的网站绝非是买台服务器、做几个网页那么简单</p>
                    <p>2020-11-18 14:56:45</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 news_focus">
                    <div class="bgc_img">
                        <img src="imgs/p11.png" alt="">
                    </div>
                    <h4>网站总体的设计关系到网站的定位</h4>
                    <p>每个人眼中认为的成功网站的定义都不一样，但可以肯定的是，能够吸引目标客户群体为网站带来价值的网站都是成功的。如今在互联网飞速发展的时代，各种技术日新月异，互联网作为一个高新技术产业，成功的网站绝非是买台服务器、做几个网页那么简单</p>
                    <p>2020-11-18 14:56:45</p>
                </div>
            </div>
        </div>
    </div>




</body>

</html>
<script>
    // 获取菜单按钮
    var menu = document.querySelector('.menu');
    var closeMenu = document.querySelector('.close');
    var nav = document.querySelector('.nav');
    menu.onclick = function() {
        // alert('1');

        nav.style.transform = 'translateX(0)';
    }
    closeMenu.onclick = function() {
        nav.style.transform = 'translateX(100%)';
    }
</script>